{% load staticfiles %}
<html>
  <head>
    <link rel="stylesheet" href="{% static 'css/pure.css' %}">
    <link rel="stylesheet" href="{% static 'css/pure_response.css' %}">
    <style>
      .mobike-container {
        margin-top: 40; 
      }
      #mobike-logo {
        display: block;
        margin:0 auto; 
      }
      #unlock-logo {
        display: block;
        margin:0 auto; 
        width: 300px; 
        height: 300px;
        margin-top: 200px;
        cursor: pointer;
      }
      .unlock-div {
        text-align: center;
      }
      .unlock-p {
        font- 
      }
    </style>
  </head>
  <body>
    <div class="mobike-container">
      <div class="pure-g">
          <div class="pure-u-1-3"></div>
          <div class="pure-u-1-3">
            <img id="mobike-logo" src="http://mobike.com/wp-content/themes/mobike/2017/assets/themes/moby/img/logo.svg" />
          </div>
          <div class="pure-u-1-3"></div>
          </div>
      </div>
      <div class="pure-g">
        <div class="pure-u-1-3"></div>
        <div class="pure-u-1-3">
            <img id="unlock-logo" src="https://git.oschina.net/kekeblom/bikechain/raw/master/public/images/unclock.png"/>
        </div>
        <div class="pure-u-1-3"></div>
      </div>
      <div class="unlock-div">
        <p class="unlock-p">CLICK TO UNLOCK</p>
      </div>
    </div>
    <script src="{% static 'scripts/jQuery.min.js' %}"></script>
    <script src="{% static 'scripts/challenges.js' %}"></script>
    <script>
      $(document).ready(function() {
          $("#unlock-logo").on("click", function() {
            console.log("click");     
          });
      });
    </script>
  </body>
</html>
